define(['jquery', 'mask', 'form'], function(require, exports, module) {

    var html, editHtml, showObj, uploading = false;

    function createHtml () {
        html = '<div id="image_upload" data-name="upload" class="dialog-box" style="display: none">';
        html += '<iframe name="fileUploadIFrame" class="hidden" src="/User/UploadPhoto"></iframe>';
        html += '<div class="box-title">上传照片</div>';
        html += '<div class="box-inner">';
        html += '<div class="upload-area">';
        html += '<div class="normal"><a href="#" onclick="return false;" class="upload-btn btn btn-default btn18"><span class="text"> 上传照片</span></a>';
        html += '<!--<div style="margin-top: 25px" class="note">也可以拖拽图片到该区域，完成上传</div>';
        html += '<div style="margin: 10px 0 25px" class="sub">支持单张 10m 以内图片上传</div>-->';
        html += '<div style="margin-top: 20px; font-size: 12px" class="sub">[提示]请严格遵守保密法律法规，严禁在互联网上存储、处理、传输、发布涉密信息</div>';
        html += '</div>';
        html += '<div style="display: none" class="draging">';
        html += '<div class="note">释放鼠标以上传</div>';
        html += '</div>';
        html += '<div style="display: none" class="uploading">';
        html += '<div class="animate">上传中...</div>';
        html += '</div>';
        html += '<div class="dropzone dz-clickable">';
        html += '<div class="dz-default dz-message"><span>拖动文件到这里上传</span></div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '<div class="close-btn" onclick="$.mask.close()"><i></i></div>';
        html += '</div>';
        showObj = $(html);
        editHtml = '<div class="dialog-box"><form>';
        editHtml += '<div class="box-title">保存照片</div>';
        editHtml += '<div class="box-inner">';
        editHtml += '<div class="pin-create">';
        editHtml += '<div class="preview"><img src="" /></div>';
        editHtml += '<div class="right-part">';
        editHtml += '<div><span class="t">标题：</span><input name="title" class="form-control" placeholder="标题" /></div>';
        editHtml += '<div class="text-block">';
        editHtml += '<div class="t">描述：</div><textarea name="desc" class="clear-input description" placeholder="描述" autocomplete="off"></textarea>';
        editHtml += '</div>';
        editHtml += '</div>';
        editHtml += '</div>';
        editHtml += '</div>';
        editHtml += '<div class="bottom-part">';
        editHtml += '<div class="buttons">';
        editHtml += '<a href="javascript:;" onclick="$.mask.close()" class="btn btn-default">取消</a>';
        editHtml += '<input name="path" type="hidden" />';
        editHtml += '<input name="photoId" type="hidden" />';
        editHtml += '<button type="submit" class="btn btn-danger">保存</button>';
        editHtml += '</div>';
        editHtml += '</div>';
        editHtml += '<div class="close-btn" onclick="$.mask.close()"><i></i></div>';
        editHtml += '</form></div>';
    }

    function bindEvent() {
        if (uploading) {
            return;
        }
        showObj.find('.upload-area').on('click', function() {
            $(window.frames['fileUploadIFrame'].document).find('#file').click();
            var tt = setInterval(function () {
                var fileVal = $(window.frames['fileUploadIFrame'].document).find('#file').val();
                if (fileVal && fileVal.length) {
                    clearInterval(tt);
                    $(window.frames['fileUploadIFrame'].document).find('form').submit();
                    uploading = true;
                    $('#jquery-extend-mask-inner .upload-area .normal').hide();
                    $('#jquery-extend-mask-inner .upload-area .uploading').show();
                }
            }, 300);
        });
    }

    function showEdit(src, fileName, id, title, desc) {
        var image = new Image();
        var editObj = $(editHtml);
        editObj.find('input[name="path"]').val(fileName);
        if (id) {
            editObj.find('input[name="photoId"]').val(id);
        }
        if (title) {
            editObj.find('input[name="title"]').val(title);
        }
        if (desc) {
            editObj.find('textarea[name="desc"]').html(desc);
        }
        editObj.find('form').on('submit', function() {
            $(this).ajaxSubmit({
                url: '/Ajax/User/addPhoto?stmp=' + new Date().toString(),
                type: 'post',
                dataType: 'json',
                success: function(d) {
                    if (!d.error) {
                        window.location.reload();
                    }
                }
            })
            return false;
        });
        image.onload = function() {
            editObj.find('.preview img').attr('src', src);
            $.mask.show(editObj);
        }
        image.src = src;
    }

    function setCallBack() {
        window.uploadCallBack = function(obj) {
            if (obj.error) {
                alert(obj.error);
                return;
            }
            var fileName = obj.fileName;
            var src = obj.src;
            var image = new Image();
            showEdit(src, fileName);
        }
    }

    function bindClick(obj) {
        $(obj).on('click', function() {
            $.mask.show(showObj);
        });
    }

    function init(config) {
        createHtml();
        bindEvent();
        setCallBack();
        if (config && config.clickObj) {
            bindClick(config.clickObj)
        }
    }

    exports.init = init;
    exports.showEdit = showEdit;
});